<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>班级表</title>
<style>
		#container{
			margin: auto;
			background-color: white;
			height: auto;
			overflow: hidden;
		}
		
		#top{
			height: 40px;
		}
		
		.top_right{
			margin-right: 20px;
			float: right;
		}
		#menu{
			margin: auto;
		}
		ul{
			list-style: none;
			width: 670px;
			height: 38px;
			margin: 0 auto;
			background-color: antiquewhite;
			
		}
		
		ul li{
			float: left;
			padding: 10px 10px;
		}
		ul li:hover{
			color: white;
			background: blue;
		}
		a:link {
			color: black;
			TEXT-DECORATION: none
		}
		a:visited {
			color: black;
			TEXT-DECORATION: none
		}
		a:hover {
			color: red;
			text-decoration: none;
		}
		a:active {
			 color: black;  
			 text-decoration: none;
		}
		.abc{
			background-color: blue;
		}
		
		#content{
			margin: auto;
		}
		
		/* table{
			border-collapse: collapse;
			width: 650px;
			margin: auto;
		} */
		
		/* td{
			border: solid 1px #ccc;
			height: 40px;
		} */
	   /*  tr:hover{
			background-color:antiquewhite;
		}  */

	</style>
	<jsp:include page="../common/common.jsp"></jsp:include>
	<!-- <script type="text/javascript">
	
		$(function(){
			$('#tt').datagrid({
				title:'班级表',
				/* width:500,
				height:250,  */
				nowrap:false,
				/*  //增加分页逻辑的代码begain
				pageSize:5,
				pagination:true,
				pageList:[5,10,15], */
				//增加分页逻辑的代码end 
				fitColumns:true,
				toolbar:'#myToolBar',
				url:'${pageContext.request.contextPath}/school/findAll.do',
				  columns:[[
					{
						field:'id',
						width:40,
						checkbox:true
					},{
					    field:'name',
					    title:'班级名称',
					    width:50,
					    sortable:true
					},{
					    field:'number',
					    title:'班级人数',
					    width:40,
					    sortable:true
					},{
					    field:'teacher',
					    title:'任课老师',
					    width:40,
					    sortable:true
					}
				]],   
				detailFormatter: function(rowIndex, rowData){
					return '<table><tr>' +
							'<td rowspan=2 style="border:0"><img src="images/' + rowData.itemid + '.png" style="height:50px;"></td>' +
							'<td style="border:0">' +
							'<p>Attribute: ' + rowData.attr1 + '</p>' +
							'<p>Status: ' + rowData.status + '</p>' +
							'</td>' +
							'</tr></table>';
				} 
			});
			
		}); 
		var addOrUpdate ='add';
		//add方法开始
		function add(title){
			//清除历史数据
			$('#myform').form('clear');
			//怎么搞出一个dialog
			$("#scottDiolog").dialog({
				//让隐藏的东西显示
				close:false,
				width:280,
				height:155,
				title:title,
				//模块化：让其他的东西都不能操作
				modal:true
				
			});
			
		};
		//add方法结束
		
		//update方法开始
		function update(){
			
			//2,给对话框赋值 拿到  原来值
			
			//2.1.1 怎么拿到id
			//返回所有被选中的行，当没有记录被选中的时候将返回一个空数组。
			var rows = $("#tt").datagrid('getSelections');
			
			var length = rows.length;
			
			if(length == 1){
				add('用户修改');
				var row = rows[0];
				
				id = row.id;
				//$.messager.alert('测试',id);
				
				//2.1把id传给后台发一个请求  拿到对象  把后台穿过来的对象  分别给我们的文本框
				$("#myform").form('load','${pageContext.request.contextPath}/school/findById.do?id='+id);
				
				//在此处明确知道是什么更新操作
				addOrUpdate = 'update';
				//3提交数据到后台
				//4前台接收数据
				
				save(addOrUpdate);
			}else{
				$.messager.alert('警告','只能选择1行修改...');
				return;
			}
			
		};
		//update方法结束
		
		//delete方法开始
		function deleteByIds(){
			//1获得选中的id
			//返回所有被选中的行，当没有记录被选中的时候将返回一个空数组。
			var rows =$("#tt").datagrid('getSelections');
			//定义一个空数组存放每一行id
			var ids=[];
			
			$(rows).each(function(index,data){
				ids.push(data.id);
			});
			//2提示用户是否确认删除
			$.messager.confirm('确认','你确定要删除记录吗？',function(data){
				if(data){
					//3把id传递给后台 后台重新查询一次  自动更新数据
					$.ajax({
						url:'${pageContext.request.contextPath}/school/deleteByIds.do',
						type:'post',
						contentType:'application/json',  
			            data:JSON.stringify(ids),  
						dataType:'json',
						success:function(backData){
							/* alert('提交成功...') */
						    /* var backData = eval('('+backData+')');//把json对象转化成js对象 */
							if(backData.result =='success'){
								//说明后台已经插入数据成功
								//$("#scottDiolog").dialog('close');//隐藏添加窗口
								$.messager.show({
									title:'提示',
									msg:backData.msg,
									timeout:5000,
									showType:'slide'
								});
								//重新请求后台 再次加载数据
								$('#tt').datagrid('reload');
							}
						}
					});
				}
			});
			
		}
		//delete方法结束
		
		//add保存方法开始
		
		function save(){
			var myUrl ='';
			if(addOrUpdate == 'update'){
				myUrl ='update.do';
			}else{
				myUrl='add.do';
			}  
			
			//调用form的submit方法
			$('#myform').form('submit',{
				url:'${pageContext.request.contextPath}/school/'+myUrl,
				//把数据提交到后台之前做数据校验。如果校验不通过 返回的是false。不提交表单。
				//只有返回值为true的时候才提交表单到后台
				onSubmit:function(){
					var result = $(this).form('validate');
					return result;
				},
				success:function(jsonData){
					jsonData = eval("("+jsonData+")");
					if(jsonData.result=='success'){
						addOrUpdate ='add';
						//说明后台都已经插入数据成功
						$("#scottDiolog").dialog('close');
					}
					$.messager.show({
						title:'提示', msg:jsonData.msg, 	timeout:2000
					});
					
					//重新请求后台 再次加载数据
					$('#tt').datagrid('reload');
				}
			});
			
		}	
		//add保存方法结束
	</script> -->
	<!-- <script type="text/javascript">
	var addOrUpdate ='add';
	//add方法开始
	function add(title){
		//清除历史数据
		$('#myform').form('clear');
		//怎么搞出一个dialog
		$("#scottDiolog").dialog({
			//让隐藏的东西显示
			close:false,
			width:280,
			height:155,
			title:title,
			//模块化：让其他的东西都不能操作
			modal:true
			
		});
		
	};
	//add方法结束
	</script> -->
</head>
<body>
	<div id="container">
		<div id="top">
		</div>
		<div style="clear: both;"></div>
		<div id="menu">
			<h2 style="text-align: center;">中深1607在线订票系统</h2>
			<ul>
				<li class="abc"><a href="#">班级表</a></li>
				<li><a href="student.jsp">学生表</a></li>
			</ul>
		</div>
		<div style="clear: both;"></div>
		<div id="content">
			<h1 style="text-align: center;">用户资料</h1>
			
			
			
			<table align="center" id="tt">
				<thead>
			        <tr style="background-color: tan;">
			        	<th data-options="field:'id',checkbox:true" width="80" ></th>
			            <th data-options="field:'name',width:100,align:'center'">班级名称</th>  
			            <th data-options="field:'number',width:100,align:'center'">班级总人数</th>   
			            <th data-options="field:'teacher',width:100,align:'center'">任课老师</th>   
			        </tr>   
			    </thead>   
			</table>
			
			<div id= "myToolBar">
				<form id= "doSearch" action="post">
					<input id="searchBox" tboxclass="easyui-text" name="dateName" />
					<a href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="findByName()">查询</a>
					<a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="add2();">增加</a>
					<a href="#" class="easyui-linkbutton" iconCls="icon-remove" onclick="deleteByIds();">删除</a>
					<a href="#" class="easyui-linkbutton" iconCls="icon-edit" onclick="update();">修改</a>
				</form>	
			</div>
			
			<div id="scottDiolog" style="display: none;">
			
				<form id="myform" method="post"> 
					<table>
					
						 <tr>
							<!-- 有些东西后台需要但是前台不显示 的处理方法...hidden... -->
							<td><input type="hidden" name="id"/></td>
						</tr> 
						
						<tr>
							<td>班级名称：</td>
							<td><input class="easyui-validatebox" data-options="required:true" name="name"/></td>
							
						</tr>
						
						<tr>
							<td>班级人数：</td>
							<td><input class="easyui-validatebox" data-options="required:true" name="number" /></td>
						</tr>
						
						<tr>
							<td>授课老师：</td>
							<td><input class="easyui-validatebox" data-options="required:true" name="teacher" /></td>
						</tr>
						
					</table>
					<a style="display: block; float: left; margin-left: 65px" class="easyui-linkbutton" iconCls="icon-ok" onclick="save();">提交</a>
				</form>
			</div>
		</div>
	</div>
	
	<!-- 此处写变态的js代码开始 -->
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/crud.js" ></script>
	<script type="text/javascript">
		var tableId     ='tt';
		var dialogId    ='scottDiolog';
		var formId      ='myform';
		var baseUrl     ='${pageContext.request.contextPath}/school/';
		
		$(function(){
			//alert("onload方法....");
			var url = baseUrl+'findByName.do';
			//var tableId ='mainTableId';
			var title = '班级';
			var tooleBarId = 'myToolBar';
			/* var name = $('input[name=name]').val();
			//加上搜索条件发与第一次进入页面一样的请求 相当于刷新  但是 这个刷新是有条件的。就是带了查询参数
			//查询参数就放到1个对象里面   1个对象不等于1个条件
			$("#tt").datagrid('load',{
				'name':name,
			}); */
			initPage(tableId,url,title,tooleBarId); 
		});
		
		function add2(){
			var url   =baseUrl+'add.do';
			var title='添加';
			add(title,dialogId,formId);
		}  
		
		function update(){
			var url   =baseUrl+'findById.do?id=';
			var title='修改';
			updateCommon(tableId,title,dialogId,formId,url);
		}
		
		function save(){
			var url=baseUrl;
			saveCommon(url,dialogId,tableId,formId);
		}
		
		function deleteByIds(){
			var url   =baseUrl+'deleteByIds.do';
			deleteByIdsCommon(tableId,url);
		}
		
		//查询方法开始
		function findByName(){
			/* var url   =baseUrl+'findByName.do';  */
			var name = $('input[name=name]').val();
			//加上搜索条件发与第一次进入页面一样的请求 相当于刷新  但是 这个刷新是有条件的。就是带了查询参数
			//查询参数就放到1个对象里面   1个对象不等于1个条件
			$("#tt").datagrid('load',{
				'name':name,
			});
		} 
		
		//查询方法结束
	</script>
	<!-- 此处写变态的js代码结束 -->
</body>

</html>